---
id: api-react-components-results-per-page
slug: /search-ui/api/react/components/results-per-page
title: ResultsPerPage
date: 2022-02-27
tags: ["demo"]
---

Shows a dropdown for selecting the number of results to show per page.

Uses [20, 40, 60] as default options. You can use `options` prop to pass custom options.

**Note:** When passing custom options make sure one of the option values match
the current `resultsPerPageProp` value, which is 20 by default.
To override `resultsPerPage` default value, use the <DocLink id="api-react-search-provider" section="initial-state" text="initial state" /> property.

### Example

```jsx

import { ResultsPerPage } from "@elastic/react-search-ui";

...

<ResultsPerPage />
```

### Example using custom options

```jsx

import { SearchProvider, ResultsPerPage } from "@elastic/react-search-ui";

<SearchProvider
    config={
        ...
        initialState: {
            resultsPerPage: 5
        }
    }
>
    <ResultsPerPage options={[5, 10, 15]} />
</SearchProvider>
```

### Properties

| Name      | Description                                                                                                                                                                                                   |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| className |                                                                                                                                                                                                               |
| options   | Dropdown options to select the number of results to show per page.                                                                                                                                            |
| view      | Used to override the default view for this Component. See <DocLink id="guides-customizing-styles-and-html" section="customizing-html" text="Customization: Component views and HTML" /> for more information. |
